<template>
  <view>
      <view class="my-settle-container">

            <label class="radio">
          			<radio color="#C00000" :checked="isFullCheck" @click="changeAllState" /><text>全选</text>
          		  </label>
          		
          		  <!-- 合计区域 -->
          		  <view class="amount-box">
          			合计:<text class="amount">￥{{checkedGoodsAmount}}</text>
          		  </view>
          		
          		  <!-- 结算按钮 -->
          		  <view class="btn-settle" @click="settlement">结算({{checkedCount}})</view>
    	  </view>
  </view>
</template>

<script>
  import {mapGetters,mapMutations,mapState} from 'vuex';
  export default {
    computed:{
      ...mapGetters('m_cart',['checkedCount','total','checkedGoodsAmount']),
      ...mapGetters('m_user', ['addstr']),
      ...mapState('m_user', ['token']),
      isFullCheck(){
          return this.total === this.checkedCount
      }
    },
    name:"my-settle",
    data() {
      return {
        seconds: 3,
        timerId: null
      };
    },
    methods:{
      ...mapMutations('m_user',['updateAllGoodsState']),
      changeAllState(){
        this.updateAllGoodsState(!this.isFullCheck)
      },
      settlement(){
        if(!this.checkedCount){
          uni.$showMsg('请选择要结算的商品')
          return
        }
        if(!this.addstr){
          uni.$showMsg('请填写收货地址')
          return
        }
        if(!this.token){
          uni.$showMsg('请先登录')
          this.delayNavigate();
          return
        }
      },
      // 展示倒计时的提示消息
      showTips(n) {
      // 展示提示消息
      uni.showToast({
      // 不展示任何图标
      icon: 'none',
      // 提示的消息
      title: '请登录后再结算！' + n + ' 秒后自动跳转到登录页',
      // 为页面添加透明遮罩，防止点击穿透
      mask: true,
      // 1.5 秒后自动消失
      duration: 1500
      	})
      },
      delayNavigate(){
      				// 1. 展示提示消息，此时 seconds 的值等于 3
      				this.showTips(this.seconds);
      				
      				// 2. 创建定时器，每隔 1 秒执行一次
      			this.timerId = setInterval(() => {
      							    // 2.1 先让秒数自减 1
      							    this.seconds--;
      								if(this.seconds <= 0){
      									// 1、清除定时器
      									clearInterval(this.timerId);
      									// 2、跳转到 my 页面
      									uni.switchTab({
      										url: '/pages/my/my'
      									})
      									// 3、终止后续代码的运行（当秒数为 0 时，不再展示 toast 提示消息）
      									return
      								}
      							    // 2.2 再根据最新的秒数，进行消息提示
      							    this.showTips(this.seconds)
      							}, 1000)
      			}
      
    }
  }
</script>

<style lang="scss">
	.my-settle-container {
		/* 底部固定定位 */
		position: fixed;
		bottom: 0;
		left: 0;
		/* 设置宽高和背景色 */
		width: 100%;
		height: 50px;
		// 将背景色从 cyan 改为 white
	    background-color: white;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding-left: 5px;
	    font-size: 14px;
	  
	    .radio {
	      display: flex;
	      align-items: center;
	    }
	  
	    .amount {
	      color: #c00000;
	    }
	  
	    .btn-settle {
	      height: 50px;
	      min-width: 100px;
	      background-color: #c00000;
	      color: white;
	      line-height: 50px;
	      text-align: center;
	      padding: 0 10px;
	    }
	}
</style>